<template>
  <div style="width: 100%;height: 100%;display: flex">
    <div class="left_box">
      <div class="code_box">
        <ace-editor style="width: 100%;height: 100%" :html-text-value="htmlStr" :ts-text-value="tsStr"></ace-editor>
      </div>
    </div>
    <div id="load4490_box">
      <div class="popup_box">
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {initMap} from "@/widgets/modelExample_cesium/common/initMap";
import {nextTick, onMounted, ref} from "vue";
import {
  loadModelLayer,
  craeteRotateCylinderGraphics
} from "../../common/loadLayers";
import gisTools from "../../common/GisTools";
import AceEditor from "@/components/aceEditor.vue";

const htmlStr = ref(`
  <template>
  <div style="width: 100%;height: 100%;display: flex">
    <div id="load4490_box">
      <div class="popup_box">
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {initMap} from "@/widgets/modelExample_cesium/common/initMap";
import {nextTick, onMounted, ref} from "vue";
import {
  loadModelLayer,
  craeteRotateCylinderGraphics
} from "../../common/loadLayers";
import gisTools from "../../common/GisTools";


const renderStart = () => {
  loadModelLayer(
      cViewer.value,
      '/public/otherModal/cityHouse/tileset.json',
      "md2_tiles",
      {
        spaceError:1,
        bLocTo: false,
        height: 0,
        offset: {
          "tx": 113.58,
          "ty": 34.78,
          "tz": 0,
          "rx": 0,
          "ry": 0,
          "rz": 0
        }
      }
  );
  gisTools.cameraFlyToPoint(cViewer.value,[113.59, 34.74],3000)
  craeteRotateCylinderGraphics(cViewer.value,{
    position:{"lon":113.59,"lat":34.74,height:50},
    image:"file/cc2.png",
    length:80,
    topRadius:200,
    bottomRadius:200,
  })

  //旋转盆
  craeteRotateCylinderGraphics(cViewer.value,{
    position:{"lon":113.60,"lat":34.74,height:50},
    image:"file/cc2.png",
    length:300,
    topRadius:400,
    bottomRadius:200,
  })

 //倒扣的碗
  craeteRotateCylinderGraphics(cViewer.value,{
    position:{"lon":113.59,"lat":34.75,height:50},
    image:"file/cc2.png",
    length:300,
    topRadius:300,
    bottomRadius:800,
  })
}
const cViewer = ref();
onMounted(() => {
  cViewer.value = initMap("load4490_box")
  nextTick(()=>{
    renderStart();
  })
})
<\/script>

<style lang="scss" scoped>
#load4490_box {
  width: 60%;
  height: 100%;
}

.popup_box {
  position: fixed;
  left: calc(40% + 40px);
  min-width: 100px;
  width: auto;
  top: 80px;
  height: 60px;
  z-index: 10;
}
</style>
`);

const tsStr = ref(`
import * as Cesium from "cesium";
import defaultImage from "@/assets/img/location.png";
import {getAssetsFile} from "@/utils/utils";

/**
 *  创建旋转圆柱
 * @function
 * @param {object} options
 * @param {object} options.position - 坐标数组  eg:{"lon":113.59,"lat":34.74,height:50}
 * @param {number} options.length - 长度  default:500  从起点位置到地面的高度
 * @param {number} options.topRadius - 顶部半径  default:500
 * @param {number} options.bottomRadius - 底部半径  default:500
 * @param {number} options.slices - 垂直分段数量   default:128
 * @param {string} options.image - 材质图片
 * 注： topRadius 和  bottomRadius 可以不一样，上小下大像倒扣的碗，上大下小像盆子
 */
 const craeteRotateCylinderGraphics=  (viewer:any,options:any)=> {
     let defaultOptions:any={
         length:500,
         topRadius:500,
         bottomRadius:500,
         image:"file/cc2.png",
         slices:128
     }
     Object.assign(defaultOptions,options)
     let { position,image,length,topRadius,bottomRadius,slices} =defaultOptions;
     if(!position){ return; }
    let entity:any=new Cesium.Entity();
    entity.position = Cesium.Cartesian3.fromDegrees(position['lon'],position['lat'],position['height']);
    entity.cylinder = {
        HeightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
        length: length ,
        topRadius:topRadius ,
        bottomRadius:  bottomRadius,
        material: new Cesium.ImageMaterialProperty({
                image:getAssetsFile(image),
                transparent: true,
                repeat: {
                    x: 1,
                    y: -1,
                },
            }),
        slices: slices,
    };
    viewer.entities.add(entity);
    setEntityRotate(entity,{
        position:position,
        rotateSacle: 4,
    });
}

/**
 * 设置实体Entity旋转
 * @param entity
 * @param  {object} options
 * @param {object} options.position - 原始位置  eg:{"lon":113.24,"lat":21.21,"height":1}
 * @param {number} options.rotateSacle - 旋转比例   default:4
 */
const setEntityRotate = (entity: any, options: any) => {
    let {position, rotateSacle} = options;
    if (position) {
        entity.position = new Cesium.CallbackProperty(function () {
            return Cesium.Cartesian3.fromDegrees(position['lon'], position['lat'], position['height']);
        }, false);
    }
    let rotateParams = {heading: 0, pitch: 0, roll: 0}
    Object.assign(rotateParams, {scale: rotateSacle})
    entity.orientation = new Cesium.CallbackProperty(function () {
        if (rotateSacle > 0) {
            rotateParams.heading += rotateSacle;
            if (rotateParams.heading === 360) {
                rotateParams.heading = 0;
            }
        }
        return Cesium.Transforms.headingPitchRollQuaternion(
            Cesium.Cartesian3.fromDegrees(position['lon'], position['lat'], position['height']),
            new Cesium.HeadingPitchRoll(
                Cesium.Math.toRadians(rotateParams.heading),
                Cesium.Math.toRadians(rotateParams.pitch),
                Cesium.Math.toRadians(rotateParams.roll)
            )
        );
    }, false);
}

  export {
    craeteRotateCylinderGraphics,
    setEntityRotate
  }
`);

const renderStart = () => {
  loadModelLayer(
      cViewer.value,
      '/public/otherModal/cityHouse/tileset.json',
      "md2_tiles",
      {
        spaceError:1,
        bLocTo: false,
        height: 0,
        offset: {
          "tx": 113.58,
          "ty": 34.78,
          "tz": 0,
          "rx": 0,
          "ry": 0,
          "rz": 0
        }
      }
  );
  gisTools.cameraFlyToPoint(cViewer.value,[113.59, 34.74],3000)
  craeteRotateCylinderGraphics(cViewer.value,{
    position:{"lon":113.59,"lat":34.74,height:50},
    image:"file/cc2.png",
    length:80,
    topRadius:200,
    bottomRadius:200,
  })

  //旋转盆
  craeteRotateCylinderGraphics(cViewer.value,{
    position:{"lon":113.60,"lat":34.74,height:50},
    image:"file/cc2.png",
    length:300,
    topRadius:400,
    bottomRadius:200,
  })

 //倒扣的碗
  craeteRotateCylinderGraphics(cViewer.value,{
    position:{"lon":113.59,"lat":34.75,height:50},
    image:"file/cc2.png",
    length:300,
    topRadius:300,
    bottomRadius:800,
  })
}
const cViewer = ref();
onMounted(() => {
  cViewer.value = initMap("load4490_box")
  nextTick(()=>{
    renderStart();
  })
})
</script>

<style lang="scss" scoped>
.left_box {
  width: 40%;
  height: 100%;
  display: flex;
  flex-direction: row-reverse;

  .code_box {
    margin: 10px;
    width: calc(100% - 220px);
    height: calc(100% - 20px);
    background-color: #ffffff;
    color: #000;
    overflow-x: hidden;
    overflow-y: auto;
  }
}

#load4490_box {
  width: 60%;
  height: 100%;
}

.popup_box {
  position: fixed;
  left: calc(40% + 40px);
  min-width: 100px;
  width: auto;
  top: 80px;
  height: 60px;
  z-index: 10;
}
</style>
